import React, {
  Component,
  useState,
  useEffect,
  useRef
} from "react";
import {
  Text,
  TextInput,
  TouchableOpacity,
  View
} from "react-native";
import Content from "../../components/content/content"
import styles from "./modify-password-sheet";
import * as api from "../../api";
import * as config from "../../config";
import cache from "../../cache";

export default function ModifyPassword(props) {
  const [old, setOld] = useState("");
  const [now, setNow] = useState("");
  const [confirm, setConfirm] = useState("");

  const getOld = value => {
    setOld(value);
  }

  const getNow = value => {
    setNow(value);
  }

  const getConfirm = value => {
    setConfirm(value);
  }

  const submit = () => {
    if (old === "" || now === "" || confirm === "") {
      global.showToast("密码不能为空");
      return;
    }

    if (now !== confirm) {
      global.showToast("两次密码输入不一致");
      return;
    }

    global.showLoading();
    api.modifyPw({
      old,
      new: now,
    }).then(async res => {
      cache.set(config.PASSWORD, now);
      global.showToast('修改成功');
      setOld('');
      setNow('');
      setConfirm('');
    }).catch(rej => {
      global.showToast(rej);
    }).finally(() => {
      global.closeLoading();
    });
  };

  return (
    <Content>
			<View style={styles.content}>
				<View style={[styles.input, styles.marginTop20]}>
					<View style={styles.inputTitle}>
						<Text>旧密码: </Text>
					</View>
					<View style={styles.inputText}>
						<TextInput maxLength={32} 
						 	autoCapitalize="none" 
              secureTextEntry={true} 
						 	placeholder="请输入密码" 
						 	style={styles.inputTextC}
						 	onChangeText={getOld}
              value={old}
						/>
					</View>
				</View>
        
				<View style={[styles.input, styles.marginTop20]}>
					<View style={styles.inputTitle}>
						<Text>新密码: </Text>
					</View>
					<View style={styles.inputText}>
						<TextInput maxLength={32} 
							autoCapitalize="none" 
              secureTextEntry={true} 
							placeholder="请输入密码" 
							style={styles.inputTextC}
							onChangeText={getNow}
              value={now}
						/>
					</View>
				</View>

        <View style={[styles.input, styles.marginTop20]}>
          <View style={styles.inputTitle}>
            <Text>确认密码: </Text>
          </View>
          <View style={styles.inputText}>
            <TextInput maxLength={32} 
              autoCapitalize="none" 
              secureTextEntry={true} 
              placeholder="请输入密码" 
              style={styles.inputTextC}
              onChangeText={getConfirm}
              value={confirm}
            />
          </View>
        </View>

				<View style={[styles.marginTop20, styles.buttonContent]}>
					<TouchableOpacity onPress={submit} style={styles.button}>
						<Text style={styles.buttonText}>提交</Text>
					</TouchableOpacity>
				</View>
			</View>
		</Content>
  )
}